<template>
  <div>
      <div class="header_con">
            <div class="header">
                <div class="welcome fl">欢迎来到好又多!</div>
                <div class="fr">
                    <div class="login_info fl">
                        欢迎您：<em>张 山</em>
                    </div>
                    <div class="login_btn fl">
                        <a href="login.html">登录</a>
                        <span>|</span>
                        <a href="register.html">注册</a>
                    </div>
                    <div class="user_link fl">
                        <span>|</span>
                        <a href="user_center_info.html">用户中心</a>
                        <span>|</span>
                        <a href="cart.html">我的购物车</a>
                        <span>|</span>
                        <a href="user_center_order.html">我的订单</a>
                    </div>
                </div>
            </div>		
        </div>

        <div class="search_bar clearfix">
            <a href="index.html" class="logo fl"><img src="static/images/logo.png"></a>
            <div class="search_con fl">
                <input type="text" class="input_text fl" name="" placeholder="搜索商品">
                <input type="button" class="input_btn fr" name="" value="搜索">
            </div>
            <div class="guest_cart fr">
                <a href="#" class="cart_name fl">我的购物车</a>
                <div class="goods_count fl" id="show_count">1</div>
            </div>
        </div>

        <div class="navbar_con">
            <div class="navbar">
                <h1 class="fl">全部商品分类</h1>
                <ul class="navlist fl">
                    <li><a href="">首页</a></li>
                    <li class="interval">|</li>
                    <li><a href="">手机生鲜</a></li>
                    <li class="interval">|</li>
                    <li><a href="">抽奖</a></li>
                </ul>
            </div>
        </div>

        <div class="center_con clearfix">
            <ul class="subnav fl">
                <li><a href="#model01" v-for="cate in cate_list" :key="cate.id">{{cate.cate_name}}</a></li>
                
            </ul>
            <div class="slide fl">
                <ul class="slide_pics">
                    <li v-for="pic in picture_list" :key="pic.id" v-if='pic.carousel == carousel'>
                        <img :src="'http://127.0.0.1:8000/' + pic.picture" alt="幻灯片">
                    </li>
                    
                </ul>
                <div class="prev"></div>
                <div class="next"></div>
                <ul class="points"></ul>
            </div>
            <div class="adv fl">
                <a href="#"><img src="images/adv01.jpg"></a>
                <a href="#"><img src="images/adv02.jpg"></a>
            </div>
        </div>

        <div class="list_model">
            <div class="list_title clearfix">
                <h3 class="fl" id="model01">新鲜水果</h3>
                <div class="subtitle fl">
                    <span>|</span>
                    <a href="#">鲜芒</a>
                    <a href="#">加州提子</a>
                    <a href="#">亚马逊牛油果</a>
                </div>
                <a href="#" class="goods_more fr" id="fruit_more">查看更多 ></a>
            </div>

            <div class="goods_con clearfix">
                <div class="goods_banner fl" v-for="cate in cate_list" :key="cate.id" v-if="cate.cate_name == '新鲜水果'"><img :src="base_url + cate.cate_img"></div>
                <ul class="goods_list fl">
                    <li v-for="goods in goods_list" :key="goods.id" v-if="goods.cate == '1'">
                        <h4><a href="#">{{goods.goods_name}}</a></h4>
                        <a href="#"><img :src="base_url + goods.goods_img"></a>
                        <div class="prize">¥ {{goods.goods_price}}</div>
                    </li>
                    
                </ul>
            </div>
        </div>

        <div class="list_model">
            <div class="list_title clearfix">
                <h3 class="fl" id="model02">海鲜水产</h3>
                <div class="subtitle fl">
                    <span>|</span>
                    <a href="#">河虾</a>
                    <a href="#">扇贝</a>				
                </div>
                <a href="#" class="goods_more fr">查看更多 ></a>
            </div>

            <div class="goods_con clearfix">
                <div class="goods_banner fl"><img src="images/banner02.jpg"></div>
                <ul class="goods_list fl">
                    <li>
                        <h4><a href="#">青岛野生海捕大青虾</a></h4>
                        <a href="#"><img src="images/goods/goods018.jpg"></a>
                        <div class="prize">¥ 48.00</div>
                    </li>
                    <li>
                        <h4><a href="#">扇贝</a></h4>
                        <a href="#"><img src="images/goods/goods019.jpg"></a>
                        <div class="prize">¥ 46.00</div>
                    </li>
                    <li>
                        <h4><a href="#">冷冻秋刀鱼</a></h4>
                        <a href="#"><img src="images/goods/goods020.jpg"></a>
                        <div class="prize">¥ 19.00</div>
                    </li>
                    <li>
                        <h4><a href="#">基围虾</a></h4>
                        <a href="#"><img src="images/goods/goods021.jpg"></a>
                        <div class="prize">¥ 25.00</div>
                    </li>
                </ul>
            </div>
        </div>

        <div class="list_model">
            <div class="list_title clearfix">
                <h3 class="fl" id="model03">猪牛羊肉</h3>
                <div class="subtitle fl">
                    <span>|</span>
                    <a href="#">鲜芒</a>
                    <a href="#">加州提子</a>
                    <a href="#">亚马逊牛油果</a>
                </div>
                <a href="#" class="goods_more fr">查看更多 ></a>
            </div>

            <div class="goods_con clearfix">
                <div class="goods_banner fl"><img src="images/banner03.jpg"></div>
                <ul class="goods_list fl">
                    <li>
                        <h4><a href="#">维多利亚葡萄维多利亚葡萄维多利亚葡萄维多利亚葡萄</a></h4>
                        <a href="#"><img src="images/goods.jpg"></a>
                        <div class="prize">¥ 38.00</div>
                    </li>
                    <li>
                        <h4><a href="#">维多利亚葡萄</a></h4>
                        <a href="#"><img src="images/goods.jpg"></a>
                        <div class="prize">¥ 38.00</div>
                    </li>
                    <li>
                        <h4><a href="#">维多利亚葡萄</a></h4>
                        <a href="#"><img src="images/goods.jpg"></a>
                        <div class="prize">¥ 38.00</div>
                    </li>
                    <li>
                        <h4><a href="#">维多利亚葡萄</a></h4>
                        <a href="#"><img src="images/goods.jpg"></a>
                        <div class="prize">¥ 38.00</div>
                    </li>
                </ul>
            </div>
        </div>

        <div class="list_model">
            <div class="list_title clearfix">
                <h3 class="fl" id="model04">禽类蛋品</h3>
                <div class="subtitle fl">
                    <span>|</span>
                    <a href="#">鲜芒</a>
                    <a href="#">加州提子</a>
                    <a href="#">亚马逊牛油果</a>
                </div>
                <a href="#" class="goods_more fr">查看更多 ></a>
            </div>

            <div class="goods_con clearfix">
                <div class="goods_banner fl"><img src="images/banner04.jpg"></div>
                <ul class="goods_list fl">
                    <li>
                        <h4><a href="#">维多利亚葡萄维多利亚葡萄维多利亚葡萄维多利亚葡萄</a></h4>
                        <a href="#"><img src="images/goods.jpg"></a>
                        <div class="prize">¥ 38.00</div>
                    </li>
                    <li>
                        <h4><a href="#">维多利亚葡萄</a></h4>
                        <a href="#"><img src="images/goods.jpg"></a>
                        <div class="prize">¥ 38.00</div>
                    </li>
                    <li>
                        <h4><a href="#">维多利亚葡萄</a></h4>
                        <a href="#"><img src="images/goods.jpg"></a>
                        <div class="prize">¥ 38.00</div>
                    </li>
                    <li>
                        <h4><a href="#">维多利亚葡萄</a></h4>
                        <a href="#"><img src="images/goods.jpg"></a>
                        <div class="prize">¥ 38.00</div>
                    </li>
                </ul>
            </div>
        </div>

        <div class="list_model">
            <div class="list_title clearfix">
                <h3 class="fl" id="model05">新鲜蔬菜</h3>
                <div class="subtitle fl">
                    <span>|</span>
                    <a href="#">鲜芒</a>
                    <a href="#">加州提子</a>
                    <a href="#">亚马逊牛油果</a>
                </div>
                <a href="#" class="goods_more fr">查看更多 ></a>
            </div>

            <div class="goods_con clearfix">
                <div class="goods_banner fl"><img src="images/banner05.jpg"></div>
                <ul class="goods_list fl">
                    <li>
                        <h4><a href="#">维多利亚葡萄维多利亚葡萄维多利亚葡萄维多利亚葡萄</a></h4>
                        <a href="#"><img src="images/goods.jpg"></a>
                        <div class="prize">¥ 38.00</div>
                    </li>
                    <li>
                        <h4><a href="#">维多利亚葡萄</a></h4>
                        <a href="#"><img src="images/goods.jpg"></a>
                        <div class="prize">¥ 38.00</div>
                    </li>
                    <li>
                        <h4><a href="#">维多利亚葡萄</a></h4>
                        <a href="#"><img src="images/goods.jpg"></a>
                        <div class="prize">¥ 38.00</div>
                    </li>
                    <li>
                        <h4><a href="#">维多利亚葡萄</a></h4>
                        <a href="#"><img src="images/goods.jpg"></a>
                        <div class="prize">¥ 38.00</div>
                    </li>
                </ul>
            </div>
        </div>

        <div class="list_model">
            <div class="list_title clearfix">
                <h3 class="fl" id="model06">速冻食品</h3>
                <div class="subtitle fl">
                    <span>|</span>
                    <a href="#">鲜芒</a>
                    <a href="#">加州提子</a>
                    <a href="#">亚马逊牛油果</a>
                </div>
                <a href="#" class="goods_more fr">查看更多 ></a>
            </div>

            <div class="goods_con clearfix">
                <div class="goods_banner fl"><img src="images/banner06.jpg"></div>
                <ul class="goods_list fl">
                    <li>
                        <h4><a href="#">维多利亚葡萄维多利亚葡萄维多利亚葡萄维多利亚葡萄</a></h4>
                        <a href="#"><img src="images/goods.jpg"></a>
                        <div class="prize">¥ 38.00</div>
                    </li>
                    <li>
                        <h4><a href="#">维多利亚葡萄</a></h4>
                        <a href="#"><img src="images/goods.jpg"></a>
                        <div class="prize">¥ 38.00</div>
                    </li>
                    <li>
                        <h4><a href="#">维多利亚葡萄</a></h4>
                        <a href="#"><img src="images/goods.jpg"></a>
                        <div class="prize">¥ 38.00</div>
                    </li>
                    <li>
                        <h4><a href="#">维多利亚葡萄</a></h4>
                        <a href="#"><img src="images/goods.jpg"></a>
                        <div class="prize">¥ 38.00</div>
                    </li>
                </ul>
            </div>
        </div>

        <div class="footer">
            <div class="foot_link">
                <a href="#">关于我们</a>
                <span>|</span>
                <a href="#">联系我们</a>
                <span>|</span>
                <a href="#">招聘人才</a>
                <span>|</span>
                <a href="#">友情链接</a>		
            </div>
            <p>CopyRight © 2016 北京趣活信息技术有限公司 All Rights Reserved</p>
            <p>电话：010-51851888    京ICP备*******8号</p>
        </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
    data(){
        return{
            cate_list:[],
            picture_list:[],
            carousel:'1',
            goods_list:[],
            base_url:'http://127.0.0.1:8000/',
        }
    },
    methods: {
        // 获取图片
        get_picture() {
            axios({
                url:'http://127.0.0.1:8000/app01/picture/',
                method:'get'
            }).then(resp=>{
                console.log(resp.data)
                this.picture_list=resp.data
            })
        },
        // 当页面加载时，自动获取分类
        get_cate() {
            axios({
                url:'http://127.0.0.1:8000/app01/addcate/',
                method:'get'
            }).then(resp=>{
                console.log(resp.data)
                this.cate_list=resp.data
            })
        },
        // 获取商品信息
        get_goods() {
            axios({
                url:'http://127.0.0.1:8000/app01/goodslist/',
                method:'get'
            }).then(resp=>{
                console.log(resp.data)
                this.goods_list=resp.data
            })
        }
    },
    created(){
        this.get_cate()  // 调用分类
        this.get_picture()  // 调用图片
        this.get_goods()  // 调用商品
    }
}
</script>

<style>

</style>